<template>
  <div>
    <el-breadcrumb separator-class='el-icon-arrow-right'>
      <el-breadcrumb-item v-bind:to='{ path: "/" }'>首页</el-breadcrumb-item>
      <el-breadcrumb-item>新闻管理</el-breadcrumb-item>
      <el-breadcrumb-item>新闻资讯</el-breadcrumb-item>
    </el-breadcrumb>
    <div class='dict-main'>
      <el-tabs v-model='activeName' class='title-top'>
        <el-tab-pane label='新闻资讯' name='first'>
          <div class='main-module charger'>
            <el-row class='posre'>
              <el-col :span='12' class='text-right search-top'>
                <el-button size='small' type='success' icon='el-icon-edit-outline' @click='imageTextAdd()'>发布新闻 </el-button>
                <el-button size='small' icon='el-icon-arrow-up' @click='show = !show' plain v-if='show==true'>搜索
                </el-button>
                <el-button size='small' icon='el-icon-arrow-down' @click='show = !show' plain v-else >搜索</el-button>

              </el-col>
            </el-row>
            <el-collapse-transition>
              <div v-show='show'>
                <el-row :gutter='20' class='bill-search'>
                  <el-col :span='12' class='bill-search-row'>
                    <label class='bill-search-title fl'>新闻标题</label>
                    <el-input placeholder="可按新闻标题进行查询" v-model='params.title'></el-input>
                  </el-col>
                  <el-col :span='12' class='bill-search-row'>
                    <label class='demonstration bill-search-title fl'>发布日期</label>
                    <div class='block'>
                      <el-date-picker
                        v-model='startDates'
                        value-format='yyyy-MM-dd'
                        type='daterange'
                        align='right'
                        unlink-panels
                        range-separator='至'
                        start-placeholder='开始日期'
                        end-placeholder='结束日期'
                        :picker-options='pickerOptions'>
                      </el-date-picker>
                    </div>
                  </el-col>
                  <el-col :span='14' class='bill-search-row text-right'>
                    <el-button type='warning' size='small' icon='el-icon-search' @click='clearParams()'>清空</el-button>
                    <el-button type='primary' size='small' icon='el-icon-search' @click='searchImageTextData()'>检索</el-button>
                  </el-col>
                </el-row>
              </div>
            </el-collapse-transition>
            <!--表格-->
            <template>
              <el-table ref="imageTextTable" :data='imageTextDatas' stripe tooltip-effect='dark' style='width: 100%'
                        @sort-change="createTimeSort" @filter-change="statusFilterHandler">
                <el-table-column label='发布时间' prop='publishTime' align='center' min-width="150"
                                 sortable="custom"></el-table-column>
                <el-table-column label='新闻名称' prop='title' min-width="150" show-overflow-tooltip align='center'></el-table-column>
                <el-table-column label='阅读量' prop="readNum" min-width="130" align='center'></el-table-column>
                <el-table-column label='状态' prop='status' columnKey="status" min-width="150" show-overflow-tooltip
                                 align='center' :filters="statusFilter" :filter-multiple=false>
                  <template slot-scope="scope">
                    <span v-if="scope.row.status=='1'" style="color: #1784ff">已上架</span>
                    <span v-if="scope.row.status=='0'" style="color: red">已下架</span>
                  </template>
                </el-table-column>
                <el-table-column label='置顶' prop="top" min-width="130" align='center'>
                  <template slot-scope="scope">
                    {{scope.row.top?'是':'否'}}
                  </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="240" align="center">
                  <template slot-scope="scope">
                    <el-button size="mini" type="success" plain @click="imageTextDetail(scope.row.id)">详情</el-button>
                    <el-dropdown class='m-left10'>
                      <el-button type='primary' size='mini'>
                        更多<i class='el-icon-arrow-down el-icon--right'></i>
                      </el-button>
                      <el-dropdown-menu slot='dropdown'>
                        <el-button size="mini" type="primary" plain @click="imageTextEdit(scope.row.id)">修改</el-button>
                        <el-button size="mini" type="success" v-if="scope.row.status == 1 && !scope.row.top" plain @click="topStatus(scope.row.id)">置顶</el-button>
                        <el-button size="mini" type="warning" plain v-if="scope.row.status==1"
                                   @click='modifyStatus(scope.row.id,0)'>下架
                        </el-button>
                        <el-button size="mini" type="warning" plain v-if="scope.row.status==0"
                                   @click='modifyStatus(scope.row.id,1)'>上架
                        </el-button>
                        <el-button size="mini" type="danger" plain @click="deleteImageText(scope.row.id)">删除</el-button>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </template>
                </el-table-column>
              </el-table>
            </template>
            <!--分页-->
            <div class='block text-center'>
              <el-pagination @size-change='handleSizeChange' @current-change='handleCurrentChange'
                             :current-page='pageable.currentPage' :page-sizes='[20, 40, 80, 100]'
                             :page-size='pageable.pageSize' layout='total, sizes, prev, pager, next, jumper'
                             :total='pageable.total'></el-pagination>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
  import {
    loadImageTextDatas,
    deleteImageText,
    modifyStatus,
    topStatus
  } from '@/api/imageText';


  export default {
    data() {
      return {
        show: false,
        pageable: {
          currentPage: 1,
          pageSize: 20
        },
        activeName: 'first',
        imageTextDatas: [], //列表数据
        startDates: '',
        statusFilter: [
          {
            text: '已上架', value: '1'
          },
          {
            text: '已下架', value: '0'
          }],
        pickerOptions: {
          shortcuts: [
            {
              text: '最近一周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
              }
            },
            {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              }
            },
            {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
              }
            }
          ]
        },
        params: {
          page: 1,
          size: 20,
          jobName: '',
          status: '',
          startDate: '',
          endDate: '',
          createTimeSort: ''
        }
      };
    },
    filters: {},
    methods: {
      //获取数据
      loadImageTextDatas() {
        this.params.page = this.pageable.currentPage;
        this.params.size = this.pageable.pageSize;
        if (this.startDates != null) {
          this.params.startDate = this.startDates[0];
          this.params.endDate = this.startDates[1];
        }
        loadImageTextDatas(this.params).then(response => {
          if (response.code !== 0) {
            this.$message({
              message: response.message,
              type: 'error'
            });
          } else {
            this.imageTextDatas = response.data.data;
            this.pageable = {
              currentPage: response.data.pageInfo.page,
              pageSize: response.data.pageInfo.pageSize,
              total: response.data.pageInfo.total
            };
          }
        });
      },
      //搜索
      searchImageTextData() {
        this.loadImageTextDatas();
      },
      clearParams() {
        this.params = {};
        this.startDates = [];
      },
      //置顶操作
      topStatus(id) {
        let _this = this;
        _this.$confirm('确定要置顶该条新闻资讯，将删除之前新闻的置顶状态，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          topStatus(id).then(response => {
            if (response.code == 0) {
              _this.$message({
                message: response.message,
                type: 'success'
              });
              _this.loadImageTextDatas();
            } else {
              _this.$message({
                message: response.message,
                type: 'error'
              });
            }
          });
        });
      },
      //申请时间排序
      createTimeSort(params) {
        if (params.prop == 'publishTime') {
          if (params.order == 'ascending') {
            this.params.createTimeSort = 1;
          } else if (params.order == 'descending') {
            this.params.createTimeSort = 2;
          }
        }
        this.loadImageTextDatas();
      },
      //状态筛选
      statusFilterHandler(filter) {
        if (this.params.status == filter.status[0]) {
          return false;
        }
        this.params.status = filter.status[0];
        this.loadImageTextDatas();
      },
      imageTextAdd(){
        this.$router.push({
          path: '/news/imageText/add'
        })
      },
      imageTextEdit(imageTextId){
        this.$router.push({
          path: `/news/imageText/edit/${imageTextId}`
        })
      },
      imageTextDetail(imageTextId){
        this.$router.push({
          path: `/news/imageText/detail/${imageTextId}`
        })
      },
      deleteImageText(imageTextId){
        var that = this;
        this.$confirm('确定要删除该条新闻资讯，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteImageText(imageTextId).then(response => {
            if (response.code == 0) {
              that.$message({
                message: '删除成功',
                type: 'success'
              });
              that.loadImageTextDatas();
            } else {
              that.$message({
                message: response.message,
                type: 'error'
              });
            }
          });
        });
      },
      modifyStatus(imageTextId,status){
        var that = this;
        modifyStatus(imageTextId,status).then(response => {
          if (response.code == 0) {
            that.$message({
              message: '操作成功',
              type: 'success'
            });
            that.loadImageTextDatas();
          } else {
            that.$message({
              message: response.message,
              type: 'error'
            });
          }
        });
      },
      //分页
      handleSizeChange(val) {
        this.pageable.pageSize = val;
        this.loadImageTextDatas();
      },
      handleCurrentChange(val) {
        this.pageable.currentPage = val;
        this.loadImageTextDatas();
      }
    },
    watch: {},
    created: function () {
      this.loadImageTextDatas();
    }
  };
</script>


